<template>
  <div class="personalDetails" id="introduction">
    <!--天气预报定位 -->
    <div class="block">

      <div class="con">
        <el-row>
          <el-col :span="12">
            <h2>省份:{{position.province}}</h2>
            <br>
            <h2>adcode:{{position.adcode}}</h2>
            <br>
            <h2>温度:{{weathers.temperature+'℃'}}</h2>
            <br>
            <h2>风力:{{weathers.windPower}}</h2>
          </el-col>
          <el-col :span="12">
            <h2>城市:{{position.city}}</h2>
            <br>
            <h2>天气:{{weathers.weather}}</h2>
            <br>
            <h2>风向:{{weathers.windDirection}}</h2>

          </el-col>
        </el-row>
        <br>
        <h2>更新时间:{{weathers.reportTime}}</h2>
      </div>
      <p class="threed">天气预报</p>
    </div>
  </div>

</template>

<script>
    import '../assets/js/maps'
    export default {
        data() {
            return {
                //地理位置
                position: {},
                //天气
                weathers: {}
            }
        },
        //定位
        methods: {
            getLngLatLocation() {
                let self = this
                AMap.plugin('AMap.CitySearch', function() {
                    var citySearch = new AMap.CitySearch();
                    citySearch.getLocalCity(function(status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            console.log('通过ip获取当前城市：', result)
                            self.position = result;
                            AMap.plugin('AMap.Weather', function() {
                                //创建天气查询实例
                                var weather = new AMap.Weather();
                                //执行实时天气信息查询
                                weather.getLive(result.city, function(err, data) {
                                    console.log(data);
                                    self.weathers = data
                                });
                            });
                            //逆向地理编码
                            AMap.plugin('AMap.Geocoder', function() {
                                var geocoder = new AMap.Geocoder({
                                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                                    city: result.adcode
                                })

                                var lnglat = result.rectangle.split(';')[0].split(',');
                                geocoder.getAddress(lnglat, function(status, data) {
                                    if (status === 'complete' && data.info === 'OK') {
                                        // result为对应的地理位置详细信息
                                        console.log(data)
                                    }
                                })
                            })
                        }
                    })
                })
            }
        },

        created() {
            this.getLngLatLocation();
        },
    }
</script>

<style lang="less" scoped>
    .block {
        height: 100%;
        background-color: rgb(78, 78, 78);
        .con {
            padding-bottom: 10px;
            color: rgb(214, 211, 211);
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            margin: 10px 0;
            font-size: 14px;
            color: aliceblue;
        }
    }
    
    .buttonBox {
        display: flex;
        margin: 20px 0;
        .item {
            margin: 0 5px;
            cursor: pointer;
            position: relative;
            a {
                display: inline-block;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: aliceblue;
            }
            .item-csdn {
                background: url('~@/assets/img/u=2591627440\,2371609101&fm=26&fmt=auto&gp=0.webp') no-repeat;
                background-position: 9px 9px;
                background-size: 65%;
                background-color: #fff;
            }
            .item-wx {
                background: url('~@/assets/img/wxx.png') no-repeat;
                background-position: 5px 5px;
                background-size: 80%;
                background-color: #fff;
            }
            .item-git {
                background: url('~@/assets/img/u=1529409795\,609160629&fm=26&fmt=auto&gp=0.webp') no-repeat;
                background-position: 5px 5px;
                background-size: 80%;
                background-color: #fff;
            }
            .item-qq {
                background: url('~@/assets/img/qq.png') no-repeat;
                background-position: 5px 5px;
                background-size: 80%;
                background-color: #fff;
            }
            img {
                width: 60px;
                transition: all 0.5s;
                opacity: 0;
                position: absolute;
                top: -70px;
                left: -5px;
            }
        }
    }
    
    // 鼠标悬浮，显示图片
    .buttonBox .item a:hover {
        box-shadow: 0 0 15px rgb(255, 255, 255);
    }
    
    .buttonBox .item:hover .pic {
        opacity: 1;
        box-shadow: 0 0 6px rgb(255, 255, 255);
    }
    
    .iconfont {
        margin-right: 5px;
    }
</style>